import React from 'react'
import { clsx } from 'clsx'

export interface BadgeProps {
  children: React.ReactNode
  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'gray' | 'info'
  size?: 'sm' | 'md' | 'lg'
  className?: string
  dot?: boolean
}

const Badge: React.FC<BadgeProps> = ({
  children,
  variant = 'gray',
  size = 'md',
  className,
  dot = false
}) => {
  const baseClasses = [
    'inline-flex items-center font-medium rounded-full',
    'whitespace-nowrap'
  ]

  const variantClasses = {
    primary: 'bg-primary-100 text-primary-800',
    success: 'bg-green-100 text-green-800',
    warning: 'bg-yellow-100 text-yellow-800',
    danger: 'bg-red-100 text-red-800',
    gray: 'bg-gray-100 text-gray-800',
    info: 'bg-blue-100 text-blue-800'
  }

  const sizeClasses = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-0.5 text-sm',
    lg: 'px-3 py-1 text-sm'
  }

  const dotClasses = {
    primary: 'bg-primary-400',
    success: 'bg-green-400',
    warning: 'bg-yellow-400',
    danger: 'bg-red-400',
    gray: 'bg-gray-400',
    info: 'bg-blue-400'
  }

  return (
    <span
      className={clsx(
        baseClasses,
        variantClasses[variant],
        sizeClasses[size],
        className
      )}
    >
      {dot && (
        <span
          className={clsx(
            'w-1.5 h-1.5 rounded-full mr-1.5',
            dotClasses[variant]
          )}
        />
      )}
      {children}
    </span>
  )
}

// Status badge for plugins
export interface StatusBadgeProps {
  status: 'pending' | 'approved' | 'rejected' | 'suspended' | 'active' | 'inactive'
  className?: string
}

export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) => {
  const statusConfig = {
    pending: { variant: 'warning' as const, label: 'Pending', dot: true },
    approved: { variant: 'success' as const, label: 'Approved', dot: true },
    rejected: { variant: 'danger' as const, label: 'Rejected', dot: true },
    suspended: { variant: 'danger' as const, label: 'Suspended', dot: true },
    active: { variant: 'success' as const, label: 'Active', dot: true },
    inactive: { variant: 'gray' as const, label: 'Inactive', dot: true }
  }

  const config = statusConfig[status] || { variant: 'gray' as const, label: status || 'Unknown', dot: true }

  return (
    <Badge
      variant={config.variant}
      dot={config.dot}
      className={className}
    >
      {config.label}
    </Badge>
  )
}

export { Badge }
